<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>会员充值</title>
    <style>
        .payDiv{
            margin: 0 4%;
            width: 90%;
            height: 60px;
            border: 1px #a2a2a1 solid;
            border-radius: 5px;
            color: #f99e01;
        }
        .div-choose{
            color: whitesmoke;
            background-color: #7aa7ce;
        }
    </style>
</head>
<script type="application/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<body>
<div th:include="common/top"></div>
<!--用户未登录，则跳转到登录页面-->
    <th:block th:if="${application.user==null}">
        <script>
            location.href="/user/toLoginReader";
        </script>
    </th:block>

    <div style="width: 100%;height: 80px;background-color: #eac985;margin-top: 1%">
        <h2 style="color: whitesmoke;line-height: 40px;float: left" th:text="${application.user.uName}"></h2>
        <th:block th:if="${vipFlag.equals('0')}">
            <span style="float: left;margin-top: 40px;color: red;font-size: 16px">&nbsp;&nbsp;&nbsp;普通用户</span>
        </th:block>
        <th:block th:if="${vipFlag.equals('1')}">
            <span style="float: left;margin-top: 40px;color: red;font-size: 16px">&nbsp;&nbsp;&nbsp;会员已过期</span>
            <span style="float: right;color: whitesmoke;margin-right: 10px;margin-top: 50px" th:text="${'会员过期时间'+dt}"></span>
        </th:block>
        <th:block th:if="${vipFlag.equals('2')}">
            <span style="float: left;margin-top: 40px;color: red;font-size: 16px">&nbsp;&nbsp;&nbsp;会员</span>
            <span style="float: right;color: whitesmoke;margin-right: 10px;margin-top: 50px" th:text="${dt+'会员到期'}"></span>
        </th:block>
        <th:block th:if="${vipFlag.equals('3')}">
            <span style="float: left;margin-top: 40px;color: red;font-size: 16px">&nbsp;&nbsp;&nbsp;管理员</span>
            <span style="float: right;color: whitesmoke;margin-right: 10px;margin-top: 50px">永久</span>
        </th:block>
    </div>
    <div>
        <ul style="list-style-type:none">
            <li>
                <button name="mBtn" onclick="setMoney(3,this)" class="payDiv div-choose">
                    <h3 style="float: left">7天体验</h3>
                    <h3 style="color: #f99e01;float: right">特惠价￥&nbsp;&nbsp;3</h3>
                </button>
            </li>
            <br><br>
            <li>
                <button name="mBtn" onclick="setMoney(12,this)" class="payDiv div-common">
                    <h3 style="float: left">1个月</h3>
                    <span style="text-decoration: line-through;font-size: smaller;color: #b73b25;margin-top: 35px;float: right">￥15</span>
                    <h3 style="color: #f99e01;float: right">特惠价￥&nbsp;&nbsp;12</h3>
                </button>
            </li>
            <br><br>
            <li>
                <button name="mBtn" onclick="setMoney(30,this)" class="payDiv div-common">
                    <h3 style="float: left">3个月</h3>
                    <span style="text-decoration: line-through;font-size: smaller;color: #b73b25;margin-top: 35px;float: right">￥36</span>
                    <h3 style="color: #f99e01;float: right">特惠价￥&nbsp;&nbsp;30</h3>
                </button>
            </li>
            <br><br>
            <li>
                <button name="mBtn" onclick="setMoney(90,this)" class="payDiv div-common">
                    <h3 style="float: left">12个月</h3>
                    <span style="text-decoration: line-through;font-size: smaller;color: #b73b25;margin-top: 35px;float: right">￥120</span>
                    <h3 style="color: #f99e01;float: right">特惠价￥&nbsp;&nbsp;90</h3>
                </button>
            </li>
        </ul>
        <h3>需要支付：<span id="showMoney" style="color: red">3</span>元</h3>
    </div>
<form th:action="@{/pay/alipay}">
    <input type="hidden" name="dona_money" id="money" value="3">
    <input type="hidden" name="dona_id" th:value="${application.user.uId}">
    <button class="payDiv div-choose" style="width: 90%;margin-left: 5%;height: 40px;background-color: #eac985">
        <h3 style="line-height: 0px">充值</h3>
    </button>
</form>
</body>
<script>
    function setMoney(money,t) {
        $("button[name=mBtn]").each(function (){
            $(this).attr("class","payDiv div-common")
        })
        $(t).attr("class","payDiv div-choose");
        //显示
        $("#showMoney").html(money);
        //传值
        $("#money").val(money);
    }

</script>
</html>